<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 响应式的导航栏</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <link href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
</head>
<body>
    <div id="tree"/>
</body>
<script>
    function getTree() {
    // Some logic to retrieve, or generate tree structure
    var tree = [
      {
        text:"Parent 1",
        nodes: [
          {
            text:"Child 1",
            nodes: [
              {
                text:"Grandchild 1"
              },
              {
                text:"Grandchild 2"
              }
            ]
          },
          {
            text:"Child 2",
            nodes: [
              {
                text:"Grandchild 1"
              },
              {
                text:"Grandchild 2"
              }
            ]
          }
        ]
      },
      {
        text:"Parent 2",
        nodes: [
          {
            text:"Grandchild 1"
          },
          {
            text:"Grandchild 2"
          }
        ]
      },
      {
        text:"Parent 3"
      },
      {
        text:"Parent 4"
      },
      {
        text:"Parent 5"
      }
    ];
    return tree;
}

$('#tree').treeview({
    data: getTree(),
    levels: 5
});
</script>
</html>